import React, { useRef } from "react";
import useStyles from "./style";

const CatFriends: React.FC = () => {
  const { nav, ul } = useStyles();

  const firstCatRef = useRef<HTMLImageElement>(null);
  const secondCatRef = useRef<HTMLImageElement>(null);
  const thirdCatRef = useRef<HTMLImageElement>(null);

  function handleScrollToFirstCat() {
    firstCatRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
  }

  function handleScrollToSecondCat() {
    secondCatRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
  }

  function handleScrollToThirdCat() {
    thirdCatRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
  }

  return (
    <>
      <nav className={nav}>
        <button onClick={handleScrollToFirstCat}>Tom</button>
        <button onClick={handleScrollToSecondCat}>Maru</button>
        <button onClick={handleScrollToThirdCat}>Jellylorum</button>
      </nav>

      <ul className={ul}>
        <li>
          <img src="https://placekitten.com/g/200/200" alt="Tom" ref={firstCatRef} />
        </li>
        <li>
          <img src="https://placekitten.com/g/300/200" alt="Maru" ref={secondCatRef} />
        </li>
        <li>
          <img src="https://placekitten.com/g/250/200" alt="Jellylorum" ref={thirdCatRef} />
        </li>
      </ul>
    </>
  );
};
export default CatFriends;
